<template>
  <div class="exam">
    <!-- 头部 -->
    <div class="exam_sub">
      <span class="title">{{ kindType[$route.query.kind] }}</span>
      <div class="sub_exit">
        <span class="save" @click="saveClick()">保存</span>
        <span class="submit" @click="submitClick()" ref="submit">提交</span>
      </div>
    </div>

    <div class="exam_area">
      <!-- 页面题号部分 -->
      <exam-total />

      <!-- 页面答题部分 -->
      <answer @timeOut="timeOutBySubmit" />
    </div>
  </div>
</template>

<script>
import answer from "./childComps/answer";
import examTotal from "./childComps/examTotal";

import Bus from "@/common/bus";

export default {
  name: "StudentExam",
  data() {
    return {
      topicList: [],
      kindType: ["作业", "考试"]
    };
  },
  components: {
    answer,
    examTotal
  },
  mounted() {
    this._topic();
  },
  methods: {
    _topic() {
      // 单选题完成题题号数
      Bus.$on("radioTopic", finishData => {
        this.topicOk(finishData);
      });

      // 多选题完成题题号数
      Bus.$on("multipleTopic", finishData => {
        this.topicOk(finishData);
      });

      // 判断题完成题题号数
      Bus.$on("judgeTopic", finishData => {
        this.topicOk(finishData);
      });

      // 填空题完成题题号数
      Bus.$on("fillTopic", finishData => {
        this.topicOk(finishData);
      });

      // 综合题完成题题号数
      Bus.$on("synthesizeTopic", finishData => {
        this.topicOk(finishData);
      });
    },

    topicOk(data) {
      // 判断是否存在该对象
      for (let i = 0; i < this.topicList.length; i++) {
        if (this.topicList[i].id == data.topicList.id) {
          this.topicList.splice(i, 1);
        }
      }

      // 添加数据(判断该题是否完成)
      if (data.finish) {
        this.topicList.push(data.topicList);
      }

      console.log(this.topicList);
    },

    saveClick() {
      // 1. 提交数据
      let url = `/edu-task/s_saveStudentTask`;
      let status = 1;
      this.submit(url, status);
    },

    submitClick() {
      let flag = false; /* 标记是否跳转出去 */

      // 1. 判断是否做完
      let msg = false;
      const count = document
        .querySelector(".count")
        .innerHTML.split("：")[1]; /* 总题量 */
      if (this.topicList.length != count) {
        msg = confirm("你的题还没做完，是否确定提交");
      } else {
        msg = confirm("确定提交");
      }
      if (msg) {
        flag = true;
      } else {
        flag = false;
      }

      if (flag) {
        // 2. 判断是否为平时作业
        if (this.$route.query.kind == 0) {
          Bus.$emit("submit");
        }

        let url = `/edu-task/s_submitStudentTask`;
        let status = 2;
        this.submit(url, status);

        // 4. 退出界面
        this.$router.push("/studentCourse");
      }
    },

    submit(url, st) {
      let time = this.getTime(); /* 提交时间 */
      alert(time);

      console.log(
        time,
        st,
        this.$route.query.courseId,
        this.$store.state.user.id,
        this.topicList
      );

      this.$http({
        url: this.$http.adornUrl(url),
        method: "post",
        data: this.$http.adornData(
          {
            submitTime: time /* 提交时间 */,
            taskId: this.$route.query.courseId /* 作业ID */,
            username: this.$store.state.user.id /* 学生ID */,
            status: st /* 作业类型 */,
            topicList: this.topicList /* 选择的选项 -> 数组 */
          },
          false
        )
      }).then(({ data }) => {
        if (data && data.code === 20000) {
          this.$message({
            message: "作业提交成功",
            type: "success"
          });
        } else {
          this.$message.error("未能成功保存作业！");
        }
      });
    },

    getTime() {
      let date = new Date();

      let nYear = date.getFullYear();
      let nMonth = date.getMonth() + 1;
      let nDay = date.getDate();
      let nHour = date.getHours();
      let nMinute = date.getMinutes() + 1;
      let nSecond = date.getSeconds();

      let currentTime =
        nYear +
        '-' +
        (nMonth < 10 ? '0' + nMonth : nMonth) +
        '-' +
        (nDay < 10 ? '0' + nDay : nDay) +
        ' ' +
        (nHour < 10 ? '0' + nHour : nHour) +
        ':' +
        (nMinute < 10 ? '0' + nMinute : nMinute) +
        ':' +
        (nSecond < 10 ? '0' + nSecond : nSecond);

      return currentTime;
    },

    timeOutBySubmit() {
      // 时间已到触发提交事件
      this.$refs["submit"].click();
    }
  },
  beforeDestroy() {
    Bus.$off("radioTopic");
    Bus.$off("multipleTopic");
    Bus.$off("judgeTopic");
    Bus.$off("fillTopic");
    Bus.$off("synthesizeTopic");
  }
};
</script>

<style scoped>
.exam {
  position: relative;
  top: -25px;
  left: -86px;
  right: 0;
  width: 100vw;
  padding: 50px;
  z-index: 1000;
  background-color: #f2f4f7;
}

.exam .exam_sub {
  position: fixed;
  top: 0;
  left: 0;
  height: 40px;
  width: 100%;
  z-index: 100;
  background: #3a4357;
  text-align: center;
  line-height: 40px;
  color: #a8a8b3;
}
.exam_sub .sub_exit {
  float: right;
  width: 200px;
  height: inherit;
  color: #fff;
  display: flex;
  justify-content: space-between;
}
.exam_sub .sub_exit span {
  flex: 1;
  line-height: 40px;
  height: inherit;
  text-align: center;
}
.exam_sub .sub_exit span:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
.exam_sub .sub_exit .submit {
  background-color: #3a8bff;
}

.exam .exam_area {
  /* margin: 30px 0 0 50px; */
  margin-top: 30px;
  display: flex;
  justify-content: center;
  user-select: none;
}
</style>
